<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="在线客服系统 - 提供实时客户服务支持">
    <meta name="keywords" content="在线客服,实时聊天,客户支持">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title || '在线客服系统' %></title>
    
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    
    <!-- 基础样式重置 -->
    <style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      }
      #app {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>抱歉，<%= htmlWebpackPlugin.options.title || '在线客服系统' %>需要启用JavaScript才能正常工作。请启用JavaScript后继续使用。</strong>
    </noscript>
    
    <!-- Vue应用挂载点 -->
    <div id="app"></div>
    
    <!-- 加载提示 -->
    <div id="loading" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: white; z-index: 9999;">
      <div style="text-align: center;">
        <div style="width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #165DFF; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto;"></div>
        <p style="margin-top: 15px; color: #666;">系统加载中...</p>
      </div>
    </div>
    
    <script>
      // 页面加载完成后隐藏加载提示
      window.addEventListener('load', function() {
        setTimeout(function() {
          const loading = document.getElementById('loading');
          if (loading) {
            loading.style.opacity = '0';
            loading.style.transition = 'opacity 0.5s ease-out';
            setTimeout(function() {
              loading.style.display = 'none';
            }, 500);
          }
        }, 300);
      });
      
      // 加载动画
      (function() {
        const style = document.createElement('style');
        style.textContent = `
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
        `;
        document.head.appendChild(style);
      })();
    </script>
  </body>
</html>
    